<template>
  <div class="role">
    <headerTop title="角色管理">
      <el-button type="primary" @click="addrole">添加角色</el-button>
    </headerTop>
    <!-- 列表 -->
    <el-table :data="tableData" style="width: 100%" class="tables">
      <el-table-column prop="name" label="名称" width="1200px" />
      <el-table-column fixed="right" label="操作" width="200px">
        <template #default="scope">
          <el-button
            type="primary"
            text
            @click="update(scope.row.id, scope.row)"
            >修改</el-button
          >
          <el-button link type="primary" @click="del(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pages
      :total="total"
      :page="query.page"
      :pageSize="query.psize"
      @changePageSize="changePageSize"
      @changePage="changePage"
    />

     <!-- 添加修改 -->
  <el-dialog v-model="dialogVisible" :title="isAdd === true ? '添加角色' : '修改角色'" width="45%" :modal="false">
    <roleDialog @clickChild="clickChild" @click="click" v-if="dialogVisible==true" :item="item" :isAdd="isAdd" :name="name"></roleDialog>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import {roleList,roleDel} from '../../api/role'
import pages from '../../components/pages/pages.vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import roleDialog from './roleDialog.vue'
import headerTop from '../../components/header/headerTop.vue'

const dialogVisible=ref(false)
const isAdd=ref(false)//添加修改的标题
const item=ref(0)
const name=ref("")
// 列表
const tableData = ref([]);

//分页
let total = ref(0); // 总条数
let query = reactive({
  page: 1, // 当前页码
  psize: 10, // 一页显示多少条数据
});
// 角色列表
const getList = async () => {
  const res = await roleList(query);
  console.log(res);
  tableData.value = res.data.list;
  total.value = res.data.counts;
};
getList();

// 切换分页数据
const changePageSize = (val: number) => {
  console.log('val-pageSize', val);
  query.psize = val; //页码
  // 请求列表数据...
  getList();
};

const changePage = (val: number) => {
  console.log('val-page', val);
  query.page = val; //每页显示多少条
  // 请求列表数据...
  getList();
};

// 删除
const del = (id: any) => {
  console.log(id);
  ElMessageBox.confirm('确定要删除所选项吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const res:any = await roleDel({id:id});
      console.log(res);
      if (res.errCode === 10000) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        });
        getList();
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      });
    });
};

// 点击添加出弹框
const addrole = ()=>{
  isAdd.value=true
  dialogVisible.value=true
}

// 点击修改出弹窗
const update = (id: any, row: any) => {
  console.log(id);
  console.log(row);
  name.value=row.name
  item.value = id
  isAdd.value=false 
  dialogVisible.value=true
};

// 点击取消按钮关闭弹窗
const clickChild=(val:boolean)=>{
  dialogVisible.value=val
  item.value = 0;
  getList();
}

// 添加或修改关闭弹窗
const click=(e:boolean)=>{
  dialogVisible.value=e
  item.value = 0;
  getList();
}
</script>

<style lang="less" scoped>
.role {
  width: 100%;
  height: 100%;
}
</style>